<template>
  <el-tabs
    type="border-card"
    v-model="activeTab"
    stretch
  >
    <el-tab-pane
      label="登录"
      name="login"
    >
      <el-form
        label-width="65px"
        ref="loginForm"
        :rules="loginFormRules"
        :model="loginFormData"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model="loginFormData.username"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="loginFormData.password"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="loginFormData.code"
            clearable
          >
            <div slot="append">
              <img
                :style="{ height: '30px' }"
                :src="code"
              />
            </div>
          </el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="primary"
            :style="{ width: '100%' }"
            @click="handleLogin"
          >立即登录</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane
      label="注册"
      name="register"
    >
      <el-form
        label-width="95px"
        ref="registerForm"
        :rules="registerFormRules"
        :model="registerFormData"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model="registerFormData.username"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            type="password"
            v-model="registerFormData.password"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="confirmPassword"
        >
          <el-input
            type="password"
            v-model="registerFormData.confirmPassword"
            clearable
          ></el-input>
        </el-form-item>
        <!-- <el-form-item
          label="手机号"
          prop="telephone"
        >
          <el-input
            v-model="registerFormData.telephone"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label="验证码"
          prop="code"
        >
          <el-input
            v-model="registerFormData.code"
            clearable
          >
            <div slot="append">
              <img
                :style="{ height: '30px' }"
                :src="code"
              />
            </div>
          </el-input>
        </el-form-item>
        <el-form-item
          label="手机验证码"
          prop="phoneCode"
        >
          <el-input
            v-model="registerFormData.phoneCode"
            clearable
          >
            <div slot="append">
              <el-button>发送</el-button>
            </div>
          </el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button
            type="warning"
            :style="{ width: '100%' }"
            @click="handleRegister"
          >立即注册</el-button>
        </el-form-item>
      </el-form>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapActions } from 'vuex';
// eslint-disable-next-line
const captureCodeImg = '%0ANqampri4uLi4uKqqqjw8PMLCwpycnAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA%0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAlgA8AEAI/wABCBxI%0AsKDBgwgTKlzIsKHDhxAjNlwQIICDBAgCBCCwwACAjyBDihxJkuSCACgJBAjAQMIAAQYUAJhJsyYA%0AAwgOEAgQAEGEBAAGABhKtKjRo0iTKl3KFICAAFCjOlAAoKrVqwAeBNjKlQABBAHCIgiwgECAs2cd%0ACADAtq1bAQYUAJhLt65dABEWBHCQAIDfvwACEGAAoLAAAxAEGDggAIBjAAYmBAjAYICBBAECNCCA%0A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%0Abl27d/Hm1buXb1+/fwH7DQgAOw==';

export default {
  name: 'Login',
  data() {
    return {
      activeTab: 'login',
      code: captureCodeImg,
      loginFormData: {},
      registerFormData: {},
      loginFormRules: {
        username: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码!', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码!', trigger: 'blur' }],
      },
      registerFormRules: {
        username: [{ required: true, message: '请输入用户名!', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码!', trigger: 'blur' }],
        confirmPassword: [{ required: true, message: '请输入确认密码!', trigger: 'blur' }],
        telephone: [{ required: true, message: '请输入手机号!', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码!', trigger: 'blur' }],
        phoneCode: [{ required: true, message: '请输入手机验证码!', trigger: 'blur' }],
      },
    };
  },
  methods: {
    ...mapActions([
      'login',
      'register',
    ]),
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.login(this.loginFormData)
            .then(() => {
              this.$router.push('/');
              this.$message.success('登录成功!');
            })
            .catch((meta) => {
              this.$message.error(meta.msg || '登录失败!');
            });
        }
      });
    },
    handleRegister() {
      const form = this.registerFormData;
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (form.password !== form.confirmPassword) {
            this.$message.error('两次输入密码不一致!');
            return;
          }
          const { username, password } = form;
          this.register({ username, password })
            .then(() => {
              this.$message.success('注册成功!');
              this.activeTab = 'login';
              this.registerFormData = {};
            })
            .catch((meta) => {
              this.$message.error(meta.msg || '注册失败!');
            });
        }
      });
    },
  },
};
</script>

<style scoped>
.el-tabs {
  width: 440px;
  margin: 50px auto;
}

.el-form-item {
  padding: 0 20px;
}
</style>
